<template>
    <div class="dict-table-box" ref="parentTarget">
        <ProTable
            class="dictType-table"
            ref="dictTypeProTableRef"
            :loading="dictTypeTable.isRefresh"
            controllerUrl="dictType"
            :stripe="false"
            :data="dictTypeTable.data"
            :page="dictTypeTable.page"
            :columns="dictTypeColumns"
            highlightCurrentRow
            :current-row-key="dictTypeTable.currentRow?.id"
            :headerActionTypes="['add', 'export', 'search']"
            :columnActionTypes="['edit', 'delete']"
            @onTableAction="dictTypeOnTableAction"
        >
            <template #form>
                <DictTypeForm ref="dictTypeFormRef" @onTableAction="dictTypeOnTableAction"></DictTypeForm>
            </template>
        </ProTable>

        <DragDivider @mousedown="onMousedown"></DragDivider>

        <ProTable
            class="dict-table"
            ref="dictProTableRef"
            :loading="dictTable.isRefresh"
            controllerUrl="dict"
            :data="dictTable.data"
            :page="dictTable.page"
            :columns="dictColumns"
            :headerActionTypes="['add', 'export', 'search']"
            :columnActionTypes="['edit', 'delete']"
            @onTableAction="dictOnTableAction"
        >
            <template #form>
                <DictForm ref="dictFormRef" @onTableAction="dictOnTableAction" :currentDictType="dictTypeTable.currentRow"></DictForm>
            </template>
        </ProTable>
    </div>
</template>

<script setup lang="tsx">
import { DictType, DictValueType } from '@/api/system/dict/types'
import DictForm from './DictForm.vue'
import { QueryFormType } from '@/types/queryform'
import DragDivider from '@/components/dragDivider/DragDivider.vue'

const {
    table: dictTypeTable,
    formRef: dictTypeFormRef,
    proTableRef: dictTypeProTableRef,
    onTableAction: dictTypeOnTableAction,
} = useTable({ api: new ProTableApi('dictType'), sort: 'sort' })

const {
    table: dictTable,
    formRef: dictFormRef,
    proTableRef: dictProTableRef,
    onTableAction: dictOnTableAction,
} = useTable({
    api: new ProTableApi('dict'),
    immediate: false,
    sort: 'sort',
    search: 'code',
})

watch(
    () => dictTypeTable.data,
    () => {
        onSetInitCurrentRow()
    },
)
watch(
    () => dictTypeTable.currentRow,
    async () => {
        await onRefreshDict()
    },
)

// 初始化字典类型当前行
const onSetInitCurrentRow = async () => {
    if (dictTypeTable.data && dictTypeTable.data.length !== 0) {
        dictTypeTable.currentRow = dictTypeTable.data[0]
    }
}

// 根据字典类型当前行Id刷新字典数据
const onRefreshDict = async () => {
    if (dictTypeTable.currentRow && dictTypeTable.currentRow.id !== 0) {
        dictTable.defaultQueryConditions = [{ name: 'dictTypeId', value: dictTypeTable.currentRow.id, operator: 'Equal' }]
        const queryForm: QueryFormType<DictValueType> = {
            sort: 'sort',
            order: true,
            queryConditions: [{ name: 'dictTypeId', value: dictTypeTable.currentRow.id, operator: 'Equal' }],
        }

        await dictOnTableAction('query-form-submit', queryForm)
    }
}

const dictTypeColumns = reactive<Array<TableColumnType<DictType>>>([
    {
        type: 'selection',
        align: 'center',
    },
    {
        prop: 'name',
        label: '名称',
        align: 'center',
    },
    {
        prop: 'code',
        label: '编码',
        align: 'center',
    },
    {
        prop: 'sort',
        label: '排序',
        align: 'center',
    },
    {
        prop: 'description',
        label: '描述',
        align: 'center',
        showOverflowTooltip: true,
    },
    {
        prop: 'isEnabled',
        label: '状态',
        align: 'center',
        component: (scope: any) => {
            return <el-tag type={scope.row.isEnabled ? 'success' : 'error'}>{scope.row.isEnabled ? '是' : '否'}</el-tag>
        },
    },
])

const dictColumns = reactive<Array<TableColumnType<DictValueType>>>([
    {
        type: 'selection',
        align: 'center',
    },
    {
        prop: 'name',
        label: '名称',
        showOverflowTooltip: true,
    },
    {
        prop: 'code',
        label: '编码',
        showOverflowTooltip: true,
    },
    {
        prop: 'value',
        label: '值',
        align: 'center',
    },
    {
        prop: 'sort',
        label: '排序',
        align: 'center',
    },
    {
        prop: 'description',
        label: '描述',
        showOverflowTooltip: true,
    },
    {
        prop: 'isEnabled',
        label: '状态',
        align: 'center',
        component: (scope: any) => {
            return <el-tag type={scope.row.isEnabled ? 'success' : 'error'}>{scope.row.isEnabled ? '是' : '否'}</el-tag>
        },
    },
])

const parentTarget = ref<HTMLElement>()
const { leftFlex, rightFlex, onMousedown } = useDragDivider(parentTarget)
</script>

<style lang="scss" scoped>
.dict-table-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;

    .dictType-table {
        flex: v-bind(leftFlex);
        transition: all 0.1s ease;
    }

    // .divider {
    //     height: v-bind(dividerHeight);
    //     border: 1px solid gray;
    //     cursor: col-resize;
    // }

    .dict-table {
        flex: v-bind(rightFlex);
        transition: all 0.1s ease;
    }
}
</style>
